import React, { Component } from 'react';

import CONFIG from '../../config';
import { moment } from '../Utils/Helper';
import { parseJSON, getMethod } from '../../redux/Helper';

import Edit from './Edit';
import Header from './Header';
import UserTweets from './UserTweets';
import UserActivities from './UserActivities';

export default class Show extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      isCurrentUser: true,
      hasFetchData: false,
    };
  }
  
  componentWillMount() {
    if (this.props.userId == this.props.params.id) {
      this.initFetch(true);
    }else{
      this.initFetch(false);
    }
  }

  componentDidMount() {
    window.addEventListener('reloadUserProfile', this.handleReloadEvent, false);
  }

  componentWillUnmount() {
    window.removeEventListener('reloadUserProfile', this.handleReloadEvent, false);
  }

  /**
   * 收到重载事件
   */
  handleReloadEvent = () => {
    this.initFetch(true);
  };
  
  /**
   * 初始化获取数据
   */
  initFetch(status) {
    let url = `${CONFIG.apiHost}/api/user/${this.props.params.id}?token=${this.props.token}`;

    fetch(url, getMethod)
    .then(parseJSON)
    .then(res => {
      this.setState({
        data: res.msg,
        isCurrentUser: status,
        hasFetchData: true
      });

      // token过期
      if (res.error) {
        this.props.dispatch(this.props.tokenExpired());
      }
    })
  }

  renderContent(url) {
    if (url.indexOf('edit') !== -1) {
      return (
        <Edit
          userData={this.state.data}
          isCurrentUser={this.state.isCurrentUser}
          token={this.props.token}
          userId={this.props.userId}
          color500={this.props.color500}
          pushTo={this.props.pushTo}
          dispatch={this.props.dispatch}
          replaceTo={this.props.replaceTo}
          tokenExpired={this.props.tokenExpired}
          handleOpenSnackbar={this.props.handleOpenSnackbar}
        />
      );
    } else if (url.indexOf('tweets') !== -1) {
      return (
        <UserTweets
          userData={this.state.data}
          token={this.props.token}
          userId={this.props.userId}
          color500={this.props.color500}
          isCurrentUser={this.state.isCurrentUser}
        />
      );
    } else {
      return (
        <UserActivities
          userData={this.state.data}
          token={this.props.token}
          color500={this.props.color500}
          pushTo={this.props.pushTo}
        />
      );
    }
  }

  render() {
    const { url, color100, color500 } = this.props;

    let header = (
      <Header
        url={url}
        color100={color100}
        color500={color500}
        data={this.state.data}
        isCurrentUser={this.state.isCurrentUser}
        pushTo={this.props.pushTo}
      />
    );

  	return (
  	  <div className="profile-container">
        {header}

        <div className="profile-content">
          {this.state.hasFetchData ? this.renderContent(this.props.url) : ''}
        </div>
      </div>
  	);
  }
};
